!<template>
  <div style="text-align: left;margin:5px 0;">
    <div class="page-header">商品管理</div>
    <a-button type="primary" @click="addCommodity()">
      <template #icon>
        <plus-circle-outlined />
      </template>
      添加商品
    </a-button>
  </div>

  <div>
    <a-modal v-model:visible="addVisible">
      <template #title>
        <div style="display: flex; align-items: center">
          <user-outlined />
          <span style="margin-left: 5px">新增商品信息</span>
        </div>
      </template>
      <template #footer>
        <!-- <a-button key="back" @click="handleCancel">Return</a-button> -->
        <a-button key="submit" type="primary" @click="submitAdd">提交</a-button>
      </template>
      <div class="edit-container">
        <div class="edit-item">
          <span class="edit-item-title">
            <span style="margin-left: 5px">名称：</span>
          </span>
          <span class="edit-item-content">
            <a-input v-model:value="add.addcommodityName" placeholder="商品名称"></a-input>
          </span>
        </div>
        <div class="edit-item">
          <span class="edit-item-title">
            <span style="margin-left: 5px">商品单位:</span>
          </span>
          <span class="edit-item-content">
            <!-- <a-input v-model:value="add.addUnit"></a-input> -->
            <a-select
              v-model:value="add.addUnit"
              v-if="!add.addDiyUnit"
              mode="combobox"
              style="width: 100%"
              placeholder="单位"
              :options="add0ptions"
            ></a-select>
          </span>
          <span v-if="add.addDiyUnit">
            <a-input v-model:value="add.addUnit" placeholder="自定义商品单位"></a-input>
          </span>
          <span style="margin-left:10px;">
            <a-checkbox v-model:checked="add.addDiyUnit">自定义单位</a-checkbox>
          </span>
        </div>
        <div class="edit-item">
          <span class="edit-item-title">
            <span style="margin-left: 5px">原价:</span>
          </span>
          <span class="edit-item-content">
            <a-input v-model:value="add.addPrice" placeholder="商品原价"></a-input>
          </span>
        </div>
        <div class="edit-item">
          <span class="edit-item-title">
            <span style="margin-left: 5px">折扣:</span>
          </span>
          <span class="edit-item-content">
            <a-input v-model:value="add.addDiscount" placeholder="商品折扣"></a-input>
          </span>
        </div>
      </div>
    </a-modal>
  </div>
  <div>
    <a-table
      :columns="columns"
      :data-source="commodityList"
      :pagination="pagenation"
      :locale="{ emptyText: '暂无商品数据' }"
      :loading="tableLoading"
      @change="changePage"
    >
      <template #headerCell="{ column }">
        <template v-if="column.key === 'commodityId'">
          <span>商品Id</span>
        </template>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'commodityId'">
          <span>{{ record.commodityId }}</span>
        </template>
        <template v-else-if="column.key === 'commodityName'">
          <div>
            <span style="color: #8c8c8c">{{ record.commodityName }}</span>
          </div>
        </template>
        <template v-else-if="column.key === 'unit'">
          <div>{{ record.unit }}</div>
        </template>
        <template v-else-if="column.key === 'barcode'">
          <!-- <svg :id="record.barcode" /> -->
          <barcode :value="record.barcode" :width="1" :height="30" />
        </template>
        <template v-else-if="column.key === 'price'">
          <div>{{ record.price }}</div>
        </template>
        <template v-else-if="column.key === 'discount'">
          <div>{{ record.discount }}</div>
        </template>
        <template v-else-if="column.key === 'discountPrice'">
          <div>{{ record.discountPrice }}</div>
        </template>
        <template v-else-if="column.key === 'stock'">
          <div>{{ record.stock }}</div>
        </template>
        <template v-else-if="column.key === 'action'">
          <div class="account-actions">
            <a-tooltip title="修改" :mouseEnterDelay="0" :mouseLeaveDelay="0">
              <a-button type="primary" shape="circle" @click="editCommodity(record.key)">
                <template #icon>
                  <form-outlined />
                </template>
              </a-button>
            </a-tooltip>

            <a-popconfirm
              title="确认是否删除该商品?"
              ok-text="是"
              okType="danger"
              cancel-text="取消"
              @confirm="submitDelete(record.key)"
            >
              <template #icon>
                <question-circle-outlined style="color: red" />
              </template>
              <a-button type="danger" shape="circle">
                <template #icon>
                  <delete-outlined />
                </template>
              </a-button>
            </a-popconfirm>
          </div>
        </template>
      </template>
    </a-table>
  </div>
  <div>
    <a-modal v-model:visible="editVisible">
      <template #title>
        <div style="display: flex; align-items: center">
          <user-outlined />
          <span style="margin-left: 5px">商品信息修改</span>
        </div>
      </template>
      <template #footer>
        <!-- <a-button key="back" @click="handleCancel">Return</a-button> -->
        <a-button key="submit" type="primary" @click="submitEdit">提交</a-button>
      </template>
      <div class="edit-container">
        <div class="edit-item">
          <span class="edit-item-title">
            <span style="margin-left: 5px">商品ID：</span>
          </span>
          <span class="edit-item-content">{{ edit.commodityId }}</span>
        </div>
        <div class="edit-item">
          <span class="edit-item-title">
            <span style="margin-left: 5px">名称：</span>
          </span>
          <span class="edit-item-content">
            <a-input v-model:value="edit.editcommodityName" :placeholder="edit.commodityName"></a-input>
          </span>
        </div>
        <div class="edit-item">
          <span class="edit-item-title">
            <span style="margin-left: 5px">条形码：</span>
          </span>
          <span class="edit-item-content">
            <a-input v-model:value="edit.editBarcode" :placeholder="edit.barcode"></a-input>
          </span>
        </div>
        <div class="edit-item">
          <span class="edit-item-title">
            <span style="margin-left: 5px">商品单位:</span>
          </span>
          <span class="edit-item-content">
            <a-input v-model:value="edit.editUnit" :placeholder="edit.unit"></a-input>
          </span>
        </div>
        <div class="edit-item">
          <span class="edit-item-title">
            <span style="margin-left: 5px">原价:</span>
          </span>
          <span class="edit-item-content">
            <a-input v-model:value="edit.editPrice" :placeholder="edit.price"></a-input>
          </span>
        </div>
        <div class="edit-item">
          <span class="edit-item-title">
            <span style="margin-left: 5px">折扣:</span>
          </span>
          <span class="edit-item-content">
            <a-input v-model:value="edit.editDiscount" :placeholder="edit.discount"></a-input>
          </span>
        </div>
        <div class="edit-item">
          <span class="edit-item-title">
            <span style="margin-left: 5px">库存:</span>
          </span>
          <span class="edit-item-content">
            <a-input v-model:value="edit.editStock" :placeholder="edit.stock"></a-input>
          </span>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import Barcode from "@/components/Barcode.vue";
import { ref } from "vue";
import { message } from "ant-design-vue";
import {
  DeleteOutlined,
  FormOutlined,
  QuestionCircleOutlined,
  UserOutlined,
  IdcardOutlined,
  LockOutlined
} from "@ant-design/icons-vue";
import {
  selectCommodityList,
  updateCommodity,
  deleteCommodity,
  addCommodity
} from "@/api/commodity";
let pagenation = {
  pageSize: 5,
  total: 0
};
const add0ptions = ref([
  {
    value: "瓶",
    label: "瓶"
  },
  {
    value: "杯",
    label: "杯"
  },
  {
    value: "箱",
    label: "箱"
  },
  {
    value: "盒",
    label: "盒"
  }
]);
const columns = [
  {
    name: "commodityId",
    dataIndex: "commodityId",
    width: 180,
    key: "commodityId"
  },
  {
    title: "商品名称",
    dataIndex: "commodityName",
    width: 180,
    key: "commodityName"
  },
  {
    title: "条形码",
    width: 120,
    dataIndex: "barcode",
    key: "barcode"
  },
  {
    title: "商品单位",
    key: "unit",
    dataIndex: "unit"
  },
  {
    title: "原价",
    key: "price",
    dataIndex: "price"
  },
  {
    title: "会员折扣",
    key: "discount",
    dataIndex: "discount"
  },
  {
    title: "会员价",
    key: "discountPrice",
    dataIndex: "discountPrice"
  },
  {
    title: "库存",
    key: "stock",
    dataIndex: "stock"
  },
  {
    title: "操作",
    key: "action"
  }
];
export default {
  name: "store",
  components: {
    DeleteOutlined,
    FormOutlined,
    QuestionCircleOutlined,
    UserOutlined,
    IdcardOutlined,
    LockOutlined,
    Barcode
  },
  setup() {
    return {
      columns,
      pagenation,
      editVisible: ref(false),
      addVisible: ref(false),
      tableLoading: ref(true),
      editPassword: ref(""),
      add0ptions,
      add: ref({
        addcommodityName: null,
        addPrice: null,
        addUnit: null,
        addDiscount: null,
        addDiyUnit: false
      })
    };
  },

  data() {
    return {
      edit: null,
      commodityList: []
    };
  },

  mounted() {
    this.getList(1, 6);
  },

  methods: {
    addCommodity() {
      this.addVisible = true;
      this.add.addUnit = ref("瓶");
    },
    editCommodity(index = 0) {
      this.editVisible = true;
      this.edit = this.commodityList[index];
    },

    getList(p = 1, s = 6) {
      const res = selectCommodityList({
        pageNum: p,
        pageSize: s
      });
      let that = this;
      res
        .then(response => {
          //这里是请求成功后的操作
          console.log(response);
          if (response.code === 100) {
            that.commodityList = [];
            let i = 0;
            for (const key in response.data) {
              if (response.data.hasOwnProperty(key)) {
                const element = response.data[key];
                element.key = i;
                i += 1;
                that.commodityList.push(element);
                that.pagenation.total = response.data.total;
              }
            }
          }
          that.tableLoading = false;
        })
        .catch(error => {
          that.tableLoading = false;
          console.log(error);
        });
    },
    submitDelete(index) {
      let that = this;
      const res = deleteCommodity({
        commodityId: this.commodityList[index].commodityId
      });
      res
        .then(response => {
          //这里是请求成功后的操作
          if (response.code === 100) {
            message.success(response.msg);
            that.commodityList = [];
            that.commodityList = that.getList();
          }
          that.tableLoading = false;
        })
        .catch(error => {
          message.success(response.msg);
          that.tableLoading = false;
          console.log(error);
        });
    },
    submitAdd() {
      let that = this;
      const res = addCommodity({
        commodityName: this.add.addcommodityName,
        unit: this.add.addUnit,
        price: this.add.addPrice,
        discount: this.add.addDiscount
      });
      res
        .then(response => {
          this.tableLoading = true;
          //这里是请求成功后的操作
          console.log(response);
          if (response.code === 100) {
            message.success(response.msg);
            that.getList(1, 6);
            (this.add.addcommodityName = ""),
              (this.add.addUnit = ""),
              (this.add.addPrice = ""),
              (this.add.addDiscount = "");
          } else {
            message.warning(response.msg);
          }
          that.addVisible = false;
          that.tableLoading = false;
          that.getList();
        })
        .catch(error => {
          that.tableLoading = false;
          that.addVisible = false;
          console.log(error);
        });
    },
    submitEdit() {
      let that = this;
      const res = updateCommodity({
        commodityId: this.edit.commodityId,
        commodityName:
          this.edit.editcommodityName === undefined
            ? this.edit.commodityName
            : this.edit.editcommodityName,
        barcode:
          this.edit.editBarcode === undefined
            ? this.edit.barcode
            : this.edit.editBarcode,
        unit:
          this.edit.editUnit === undefined
            ? this.edit.unit
            : this.edit.editUnit,
        price:
          this.edit.editPrice === undefined
            ? this.edit.price
            : this.edit.editPrice,
        discount:
          this.edit.editDiscount === undefined
            ? this.edit.discount
            : this.edit.editDiscount,
        stock:
          this.edit.editStock === undefined
            ? this.edit.stock
            : this.edit.editStock
      });
      res
        .then(response => {
          this.tableLoading = true;
          //这里是请求成功后的操作
          console.log(response);
          if (response.code === 100) {
            message.success(response.msg);
            that.getList(1, 6);
          } else {
            message.warning(response.msg);
          }
          that.editVisible = false;
          that.tableLoading = false;
          that.getList();
        })
        .catch(error => {
          that.tableLoading = false;
          that.editVisible = false;
          console.log(error);
        });
    },
    changePage(pagination) {
    },
    deleteConfirm() {}
  }
};
</script>

<style scoped>
.page-header {
  font-size: 22px;
  color: #616161;
  margin: 0.5rem 0;
}
.edit-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.edit-item-title {
  user-select: none;
  width: 100px;
  font-size: 16px;
  /* border-bottom: 1px solid gray; */
}
.edit-item-content {
  margin-left: 1rem;
  color: rgb(126, 126, 126);
}
.edit-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.account-actions {
  display: flex;
  gap: 1rem;
}
</style>